<template>
  <div id="glxzbz">
    <div id="echartsGlxzbz"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartsGlxzbz: null,
      option: {
        grid: {
          top: '95',
          left: '5%',
          right: '5%',
          bottom: '15',
          containLabel: true
        },
        title: {
          text: '各类行政编制配置比对',
          top: '10',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross',
          //   crossStyle: {
          //     color: '#999'
          //   }
          // }
        },
        legend: {
          selectedMode: 'single',
          top: '40',
          left: 'center',
          textStyle: {
            fontSize: 14,//字体大小
            color: '#8bd46e'
          },
          data: ['党政群行政编制', '公安专项编制', '检察院专项编制', '法院专项编制', '司法专项编制']
          // selected: {
          //   '党政群行政编制': true,
          //   '公安专项编制': false,
          //   '检察院专项编制': false,
          //   '法院专项编制': false,
          //   '司法专项编制': false
          // }
        },
        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            axisTick: { show: false },
            axisLabel: {
              show: true,
              rotate: 30,
              textStyle: {
                fontSize: 13,//字体大小
                color: '#ffffff'
              }
            },
            data: ['自治区直属', '南宁市', '柳州市', '桂林市', '崇左市', '钦州市', '玉林市', '百色市', '防城港市', '贺州市', '贵港市', '河池市', '来宾市', '梧州市', '北海市']
          }
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
            name: '编制数',
            nameTextStyle: {
              fontSize: 14,//字体大小
              color: '#ffffff'
            },
            splitLine: { show: false },
            axisLabel: { show: false }
          }
        ],
        series: [
          {
            name: '党政群行政编制',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [20650, 14471, 14604, 15724, 21829, 24918, 24758, 17530, 16057, 23365, 19144, 14630, 17627, 16598, 22007],
            itemStyle: {
              normal: {
                barBorderRadius: 12,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#09bcb7'
                }, {
                    offset: 1,
                    color: '#8bd46e'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '公安专项编制',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [6912, 5742, 9288, 5426, 5261, 5703, 7057, 5177, 7251, 6410, 6252, 5642, 9458, 7578, 8633],
            itemStyle: {
              normal: {
                barBorderRadius: 12,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#09bcb7'
                }, {
                    offset: 1,
                    color: '#8bd46e'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '检察院专项编制',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [9130, 7414, 6526, 7655, 8308, 6907, 9192, 5587, 7914, 7032, 7745, 6878, 9177, 5400, 8259],
            itemStyle: {
              normal: {
                barBorderRadius: 12,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#09bcb7'
                }, {
                    offset: 1,
                    color: '#8bd46e'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '法院专项编制',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [6014, 5853, 8616, 9300, 8542, 8986, 7292, 7532, 8102, 8973, 5761, 9464, 7901, 9533, 5397],
            itemStyle: {
              normal: {
                barBorderRadius: 12,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#09bcb7'
                }, {
                    offset: 1,
                    color: '#8bd46e'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          },
          {
            name: '司法专项编制',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            data: [7227, 7631, 6335, 6010, 7485, 6635, 6852, 9557, 5807, 6923, 5210, 8700, 8402, 6557, 5801],
            itemStyle: {
              normal: {
                barBorderRadius: 12,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#09bcb7'
                }, {
                    offset: 1,
                    color: '#8bd46e'
                }]),
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  rotate: 45,
                  textStyle: { //数值样式
                    color: '#ffffff',
                    fontSize: 13
                  }
                }
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initEchartsGlxzbz()
  },
  methods: {
    initEchartsGlxzbz() {
      this.echartsGlxzbz = this.$echarts.init(document.getElementById('echartsGlxzbz'));
      this.echartsGlxzbz.setOption(this.option);
      window.addEventListener('resize', () => this.echartsGlxzbz.resize(), false )
    }
  }
}
</script>

<style lang="scss">
#glxzbz {
  width: calc(50% - 30px);
  height: 100%;
  margin-left: 15px;
  margin-right: 15px;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
}
#echartsGlxzbz {
  width: 100%;
  height: 100%;
}
</style>
